<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta http-equiv="Content-Type" content="text/html;charset=GBK">
    <title>login</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .logo{
            padding: 20px;
        }
        #container{
            width: 100%;
            height: auto;
            overflow: hidden;
            position: relative;
        }
        #advertise{
            width: 100%;
            height: 600px;

        }
        #advertise img{
            /*width: 100%;*/
            height: 100%;
            margin-left: -36%;
        }

        #loginbar{
            position: absolute;
            top: 90px;
            right: 200px;
            background-color: white;
            width: 380px;
            height: 373px;
        }
        .login-hd{
            height: 78px;
            line-height: 78px;
            padding: 0 30px;
        }
        .login-hd li{
            width: 130px;
            float: left;
            text-align: center;
            position: relative;
            list-style: none;
            cursor: pointer;
        }
        .login-hd li:first-child{
            margin-right: 60px;
        }
        .login-hd li:first-child:after{
            content: "";
            position: absolute;
            top: 27px;
            right: -30px;
            width: 1px;
            height: 24px;
            background: #dedede;
        }
        .active{
            color: #3b99fc;
        }
        .login-cont{
            padding: 0 30px 15px 30px;
        }
        .login-item{
            position: relative;
            height: 44px;
            margin-bottom: 16px;
        }
        .item-label{
            width: 20px;
            height: 20px;
            position: absolute;
            top: 11px;
            left: 8px;
            z-index: 10;
        }
        .item-label img{
            width: 100%;
            height: 100%;
        }
        .login-item input{
            height: 44px;
            line-height: 44px;
            display: block;
            padding-left: 36px;
            width: 100%;
            box-sizing: border-box;
        }
        .login-btn{
            width: 320px;
            height: 44px;
            margin: 0 auto;
        }
        .login-btn input{
            width: 100%;
            height: 44px;
            line-height: 44px;
            background-color: #FF8000;
            border: none;
            outline: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }
        .login-txt{
            margin-top: 10px;
            text-align: center;
            line-height: 20px;
            height: 20px;
            font-size: 12px;
        }
        .login-txt a{
            margin: 0 5px;
            text-decoration: none;
            color: #666;
        }
        .login-txt a:first-child{
            color: #3b99fc;
        }
        .login-ft{
            padding: 10px 20px 15px;
            font-size: 13px;
            color: #666;
            border-top: 1px solid #dedede;
        }
        .login-ft p{
            line-height: 20px;
            text-align: justify;
        }
    </style>
</head>

<body>
<p class="logo"><img src="http://localhost:8080/sellticket_war_exploded/forward/img/title.png" width="266" height="64" alt=""/></p>
<div id="container">
    <div id="advertise">
        <img src="http://localhost:8080/sellticket_war_exploded/forward/img/adv12306_bg.jpg" alt=""/>
    </div>
    <div id="loginbar">
        <ul class="login-hd">
            <li class="active">账号登录</li>
            <li>扫码登录</li>
        </ul>
        <div class="login-cont">
            <form method="post" action="http://localhost:8080/sellticket_war_exploded/user/userLogin" id="telephone">
                <div class="login-item">
                    <label for="userphone" class="item-label">
                        <img src="http://localhost:8080/sellticket_war_exploded/forward/img/user.png" alt="">
                    </label>
                    <input type="text" name="user_phone" value="19119390786" id="userphone" placeholder="手机号">
                </div>
                <div class="login-item">
                    <label for="userpwd" class="item-label">
                        <img src="http://localhost:8080/sellticket_war_exploded/forward/img/pwd.png" alt="">
                    </label>
                    <input type="password" name="user_password" value="123456" id="userpwd" placeholder="密码">
                </div>
                <div class="login-btn">
                    <input type="submit" value="立即登陆">
                </div>
            </form>
            <div class="login-txt">
                <a href="http://localhost:8080/sellticket_war_exploded/forward/signup.jsp" id="gotosu">注册12306</a>  |
                <a href="javascript:void(0)">忘记密码？</a>
            </div>
        </div>
        <div class="login-ft">
            <p>
                铁路12306每日5:00至次日1:00（周二为5:00至23:30）提供购票、改签、变更到站业务办理， 全天均可办理退票等其他服务。
            </p>
        </div>
    </div>
</div>
</body>
</html>